<!DOCTYPE html>
<html>
<head>
    <title>Subject List</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
    <table id="subject-table" lay-filter="subject-table"></table>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script>
    <script>
        $(function () {
            // 初始化 layui table 组件
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#subject-table',
                    url: 'http://localhost:5000/api/subject',
                    cols: [[
                        {field: 'id', title: 'ID', width: 80},
                        {field: 'name', title: 'Name', width: 120}
                    ]],
                    page: true
                });
            });
        });
    </script>
</body>
</html>